<template>
  <section>
    <div
      class="row-start-center py-[15px] text-[14px] border-bottom text-[#444] px-[15px]"
      @click="expand = !expand"
    >
      <div class="w-[23%] break-all box-border px-[4px]">
        <div class="truncate">
          {{ item.UserName }}
        </div>
        <div class="text-[#888] truncate">
          {{ item.NickName || "--" }}
        </div>
      </div>
      <div class="w-[32%] text-center break-all box-border px-[4px]">{{ item.Name || "--" }}</div>
      <div class="w-[25%] text-center box-border px-[4px]">
        <div>
          {{ item.Cat2 }}
        </div>
        <div class="text-[#888] text-[13px]">
          {{ item.Cat3 }}
        </div>
      </div>
      <div
        class="w-[20%] text-center box-border px-[4px]"
        :class="{
          'text-red': item.TotalAmount < 0,
          'text-blue': item.TotalAmount > 0
        }"
      >
        {{ formatCurrency(item.TotalAmount) }}
      </div>
    </div>
    <div class="bg-[#f8f8f8] px-[15px]" v-if="expand">
      <ul class="text-[#888]">
        <li class="flex justify-between items-center py-[10px]">
          <div>用户名</div>
          <div>{{ item.UserName }}</div>
        </li>
        <li class="flex justify-between items-center py-[10px]">
          <div>昵称</div>
          <div>{{ item.NickName || "--" }}</div>
        </li>
        <li class="flex justify-between items-center py-[10px]">
          <div>期号</div>
          <div>{{ item.BitchNo }}</div>
        </li>
        <li class="flex justify-between items-center py-[10px]">
          <div>下注时间</div>
          <div>{{ formatDate(item.CreatedAt) }}</div>
        </li>
      </ul>
    </div>
  </section>
</template>
<script setup lang="ts">
import { formatCurrency, formatDate } from "@/utils/common";

withDefaults(
  defineProps<{
    item: ReportUnsettledMo;
  }>(),
  {}
);
const expand = ref(false);
</script>
